<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArtListTemplate :artList="artList" @close="moreAction" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from "@/api/article.js";
import ArtListTemplate from "@/components/ArtListTemplate";
export default {
  name: "ArticleList",
  props: {
    channel: {
      type: Number,
      default: 0
    }
  },
  components: { ArtListTemplate },
  data() {
    return {
      artList: [],
      loading: false,
      finished: false,
      timestamp: null,
      isLoading: false
    };
  },
  computed: {},
  created() {
    // 创建组件完成，会自动调用created
    //console.log(Date.now(), this.channel)

    this.onLoad();
    // channelsID,articleId
    this.$bus.$on("delArticle", obj => {
      //console.log(obj,'要删除的id')
      let { channelsID, articleId } = obj;
      // 对当前频道是否正确进行判断
      if (channelsID !== this.channel) {
        return;
      }
      // 找到要删除的序列 文章id
      // [{}] 去查找响应的 id
      let idx = this.artList.findIndex(
        it => it.art_id.toString() === articleId
      );
      // 当存在执行删除任务
      if (idx !== -1) {
        // 数组删除指定序列的小技巧
        this.artList.splice(idx, 1);
      }
    });
  },
  mounted() {},
  //   filters:{
  //     //   'relativeTimes' : function(val){
  //     //       //console.log(val)
  //     //       return relativeTime(val)
  //     //   }
  //     // relativeTimes:relativeTime
  //   },
  methods: {
    async onRefresh() {
      //console.log('下拉刷新')
      try {
        const res = await getArticles({
          timestamp: Date.now(),
          channel_id: this.channel
        });
        // 这是一个数组
        const list = res.data.data.results;
        this.artList = list;
        this.isLoading = false;
        this.$toast.success(`加载成功${list.length}条`);
      } catch {
        this.isLoading = false;
      }
    },
    async onLoad() {
      let timestamp = this.timestamp;
      //console.log('加载更多')
      //console.log(this.loading,'请求前')
      if (!timestamp) {
        timestamp = Date.now();
      }
      try {
        const res = await getArticles({
          timestamp: timestamp,
          channel_id: this.channel
        });
        // 每一次的时间
        this.timestamp = res.data.data.pre_timestamp;
        // 这是一个数组
        const list = res.data.data.results;
        // 如果它 为空说明我的数据完了1
        if (list.length === 0) {
          // 如果本次取不到数据了，则说明所有的数据加载完成
          this.finished = true;
        }
        // 把我们每一次的数据更新到我们的  artList 通过 push 加长数组
        this.artList.push(...list);
        // 加载状态结束
        this.loading = false;
      } catch {
        this.loading = false;
      }
    },
    // 用户点击关闭删除文章
    moreAction(article) {
      this.$emit("showMoreAction", article.art_id.toString());
    }
  }
};
</script>

<style scoped lang="less">
.meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
